import { Component, Input } from '@angular/core';
import { trigger, transition, state, animate, style, AnimationEvent, keyframes } from '@angular/animations';

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [    // trigger作为动画的触发器，将状态与转场组合在一起，并为动画命名   将触发器附加到想要触发动画的 元素 上
      /*
      动画状态和样式:state函数与style函数配套使用
      state() 来定义那些每个转场     结束时的样式
      */
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      /*
      转场与时序:变化不那么突兀,动画转场在一段时间内发生，使用transition（转场）函数与animate(时序)函数    中间样式
      */
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
      transition('* => closed', [
        animate('1s')
      ]),
      transition('* => open', [
        animate('0.5s')
      ]),
      transition('open <=> closed', [
        animate('0.5s')
      ]),
      transition('* => open', [
        animate('1s',
          style({ opacity: '*' }),
        ),
      ]),
      transition('* => *', [
        animate('1s')
      ]),

      // transition('open => closed', [
      //   animate('5s', keyframes ( [
      //     style({ height: '250px', offset: 0.2 }),
      //     style({ height: '300px', offset: 0.4 }),
      //     style({ height: '250px', offset: 0.6 }),
      //     style({ height: '150px', offset: 0.8 }),
      //     style({ height: '100px', offset: 1 }),
      //   ]))
      // ])

      // 注意：一旦匹配上，则不会继续向下匹配，当匹配不上时才会去匹配通配符定义的时序与转场动画
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {

  @Input() logging = false;
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
  onAnimationEvent(event: AnimationEvent) {
    if (!this.logging) {
      return;
    }
    // openClose is trigger name in this example
    console.warn(`Animation Trigger: ${event.triggerName}`);

    // phaseName is start or done
    console.warn(`Phase: ${event.phaseName}`);

    // in our example, totalTime is 1000 or 1 second
    console.warn(`Total time: ${event.totalTime}`);

    // in our example, fromState is either open or closed
    console.warn(`From: ${event.fromState}`);

    // in our example, toState either open or closed
    console.warn(`To: ${event.toState}`);

    // the HTML element itself, the button in this case
    console.warn(`Element: ${event.element}`);
  }
}
